<template>
  <el-drawer :title="title" :visible.sync="visible" :wrapper-closable="false" size="520px" direction="rtl" @close="handleClose" @mousedown.native="handleWrapperMousedown($event)" @mouseup.native="handleWrapperMouseup($event)">
    <!-- 不可编辑信息 -->
    <template v-if="!disabled">
      <el-row type="flex" align="middle" class="userInfo_base">
        <el-col :span="9" class="text-center">
          <el-avatar v-if="form.avatar" :key="form.avatar" :size="90" :src="`${process}${form.avatar}`" />
          <el-avatar v-else :size="90">
            <img src="@/assets/images/profile.png">
          </el-avatar>
        </el-col>
        <el-col :span="15" class="desc">
          <ul>
            <li><span>用户ID：</span>{{ form.userId }}</li>
            <li><span>登录账号：</span>{{ form.userName }}</li>
            <li><span>创建时间：</span>{{ form.createTime }}</li>
          </ul>
        </el-col>
      </el-row>
      <el-divider><i class="svg-icon el-icon-edit" />用户信息</el-divider>
    </template>
    <!-- 可编辑信息 -->
    <el-form ref="form" label-position="top" label-width="80px" :model="form" :rules="rules">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户名" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入" maxlength="6" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录账号" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phonenumber">
            <el-input v-model="form.phonenumber" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <select-dict-tag v-model="form.sex" dict-code="sys_user_sex" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <select-dict-tag v-model="form.status" dict-code="sys_normal_disable" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色" prop="roleIds">
            <el-select v-model="form.roleIds" style="width:100%" multiple placeholder="请选择">
              <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="disabled" :span="12">
          <el-form-item prop="password">
            <template slot="label">
              <span>初始密码
                <el-tooltip effect="dark" :content="`初始密码：${initPassword}`" placement="right">
                  <i class="el-icon-info tips-icon" />
                </el-tooltip>
              </span>
            </template>
            <el-input v-model="form.password" show-password disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-divider><i class="svg-icon el-icon-office-building" />岗位信息</el-divider>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属部门" prop="deptId">
            <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位" prop="postIds">
            <el-select v-model="form.postIds" multiple collapse-tags placeholder="请选择">
              <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" :rows="3" type="textarea" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!readOnly" class="el-drawer__footer">
      <el-button @click="handleClose">关 闭</el-button>
      <el-button :loading="loading" type="primary" @click="submitForm">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { getUser, addUser, updateUser } from '@/api/system/user'
import { userMixin } from '@/views/system/user/mixins/userMixin'
import Treeselect from '@riophae/vue-treeselect'
export default {
  name: 'UserInfoDrawer',
  components: { Treeselect },
  mixins: [userMixin],
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: this.show,
      title: '',
      disableForm: {},
      form: {},
      loading: false,
      // 是否点击在遮罩层
      classmodel: false,
      // 隐藏
      disabled: false,
      // 只读
      readOnly: false,
      // 默认密码
      initPassword: '',
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单校验
      rules: {
        userName: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' }
        ],
        email: [
          {
            type: 'email',
            message: "'请输入正确的邮箱地址",
            trigger: ['blur', 'change']
          }
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    show: {
      immediate: true,
      handler(val) {
        this.visible = this.show
      }
    }
  },
  methods: {
    // 新增
    add() {
      getUser().then((response) => {
        this.postOptions = response.posts
        this.roleOptions = response.roles
        this.form.password = this.initPassword
        this.title = '新增'
      })
      this.$nextTick(() => {
        this.disabled = true
      })
    },
    // 编辑
    edit(row) {
      getUser(row.userId).then((response) => {
        this.postOptions = response.posts
        this.roleOptions = response.roles
        this.form.postIds = response.postIds
        this.form.roleIds = response.roleIds
        this.title = '编辑'
      })
      this.$nextTick(() => {
        this.form = Object.assign({}, row)
      })
    },
    // 查看
    check(row) {
      getUser(row.userId).then((response) => {
        this.postOptions = response.posts
        this.roleOptions = response.roles
        this.form.postIds = response.postIds
        this.form.roleIds = response.roleIds
        this.title = '查看'
      })
      this.$nextTick(() => {
        this.readOnly = true
        this.form = Object.assign({}, row)
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.form.userId !== undefined) {
            updateUser(this.form).then((response) => {
              this.msgSuccess('修改成功')
              this.$emit('update:show', false)
              this.$emit('close')
            })
          } else {
            addUser(this.form).then((response) => {
              this.msgSuccess('新增成功')
              this.$emit('update:show', false)
              this.$emit('close')
            })
          }
          this.loading = false
        }
      })
    },
    // 关闭 重置数据
    handleClose() {
      this.classmodel = false
      this.disabled = false
      this.readOnly = false
      this.$refs.form.resetFields()
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.userInfo_base {
  .desc {
    ul {
      line-height: 1.9;
      li {
        font-size: 14px;
        letter-spacing: 0.5px;
        color: #606266;
      }
    }
  }
}

.svg-icon {
  font-size: 14px;
  vertical-align: -1px;
  margin: 0 6px 0 0;
}
</style>

